/*
 * @Author: shijianxin
 * @Date: 2022-04-24 11:16:56
 * @Description: file content
 */

import React from "react";
import { NavLink, Route, Switch, useHistory, Router } from "react-router-dom";
import Home from "./Home";
import MovieList from "./movie/MovieList";
import AddMovie from "./movie/AddMovie";
import EditMovie from "./movie/EditMovie";
import { Layout, Menu, MenuProps } from "antd";

const { Header, Sider, Content } = Layout;

type MenuItem = Required<MenuProps>["items"][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: "group"
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}

const items: MenuItem[] = [
  getItem(<NavLink to="/movie">电影列表</NavLink>, "/movie"),
  getItem(<NavLink to="/movie/add">添加电影</NavLink>, "/movie/add"),
];

const _Layout: React.FC = function () {
  const location = useHistory();
  return (
    <div className="container">
      <Layout>
        <Header>
          <NavLink to="/">猫眼电影管理系统</NavLink>
        </Header>
        <Layout>
          <Sider>
            <Menu
              defaultSelectedKeys={[location.location.pathname]}
              mode="inline"
              theme="dark"
              items={items}
            ></Menu>
          </Sider>
          <Content>
            <div className="main">
              <Switch>
                <Route path="/movie" component={MovieList} exact></Route>
                <Route path="/movie/add" component={AddMovie}></Route>
                <Route path="/movie/edit/:id" component={EditMovie}></Route>
                <Route path="/" component={Home} exact></Route>
              </Switch>
            </div>
          </Content>
        </Layout>
      </Layout>
    </div>
  );
};

export default _Layout;
